<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="company"></icon>
                    企业基本信息
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>企业管理</el-breadcrumb-item>
                    <el-breadcrumb-item>基本信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="手机号码/公司名称"
                                          clearable
                                          :disabled="operate.searchLoading"
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.keyword_type"
                                               slot="prepend"
                                               placeholder="不限"
                                               style="width: 105px;">
                                        <el-option label="不限" value=""></el-option>
                                        <el-option label="手机号" value="mobile"></el-option>
                                        <el-option label="公司名称" value="company_name"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="search.searchLoading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
<!--                                    <el-button type="primary"-->
<!--                                               icon="el-icon-plus"-->
<!--                                               size="medium"-->
<!--                                               @click="openDialogBox">创建-->
<!--                                    </el-button>-->
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="r-flex mt-10">
                            <div class="r-flex__item">
                                <!-- 类型 -->
                                <el-select v-model="params.date_type"
                                           placeholder="类型"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;">
                                    <el-option label="创建" value="create"></el-option>
                                    <el-option label="更新" value="update"></el-option>
                                </el-select>
                                <!-- 日期类型 -->
                                <el-select v-model="params.date_type_value"
                                           size="medium"
                                           placeholder="日期"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           :disabled="isEmpty(params.date_type)">
                                    <el-option v-for="item in pickerDate.dateTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <!-- 日期 -->
                                <el-date-picker range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="medium"
                                                class="mr-10"
                                                style="width: 300px;"
                                                clearable
                                                v-model="params.date_value"
                                                :type="params.date_type_value || 'daterange'"
                                                :picker-options="pickerDate.dateOptions"
                                                :disabled="isEmpty(params.date_type) || isEmpty(params.date_type_value)">
                                </el-date-picker>
                                <!-- 会员级别 -->
                                <el-select v-model="params.vip_level"
                                           placeholder="会员级别"
                                           size="medium"
                                           clearable
                                           multiple
                                           collapse-tags
                                           class="mr-10"
                                           style="width: 170px;"
                                           @change="handleQuery">
                                    <el-option label="普通会员" :value="0"></el-option>
                                    <el-option label="认证会员" :value="1"></el-option>
                                    <el-option label="推荐会员" :value="2"></el-option>
                                    <el-option label="品牌会员" :value="3"></el-option>
                                </el-select>
                                <!-- 所属行业 -->
                                <el-select v-model="params.industry"
                                           placeholder="所属行业"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 130px;"
                                           @change="handleQuery">
                                    <el-option v-for="item in industryOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <!-- 认证 -->
                                <el-select v-model="params.cert_status"
                                           placeholder="认证"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 100px;"
                                           @change="handleQuery">
                                    <el-option label="未认证" :value="0"></el-option>
                                    <el-option label="已认证" :value="1"></el-option>
                                </el-select>
                                <!-- 名企 -->
                                <el-select v-model="params.famous"
                                           placeholder="名企"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           @change="handleQuery">
                                    <el-option label="否" :value="0"></el-option>
                                    <el-option label="是" :value="1"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <strong class="font-s16 text-bold">结果：{{ total || 0 }}</strong>
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="companyBasics"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor">

                        <el-table-column label="ID" fixed="left" prop="uid" width="80">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.id }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="账户名" prop="user.account" width="120" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide"
                                     :class="{'text-info-light': !item.row.user.account}">
                                    {{ item.row.user.account || '无' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="公司名称" prop="company_name" width="200" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <el-link target="_blank"
                                         type="text-hide"
                                         :underline="false"
                                         :href="item.row.link_url">
                                    <div class="text-hide text-primary">{{ item.row.company_name }}</div>
                                </el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系人" prop="contacts" width="80">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.contacts}">{{ item.row.contacts || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.mobile}">{{ item.row.mobile || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="形象" width="70" align="center">
                            <template slot-scope="item">
                                <el-image class="image-avatar image-avatar--32"
                                          fit="cover"
                                          :src="item.row.logo ? item.row.logo_url : ''"
                                          :preview-src-list="[item.row.logo_url]">
                                    <div slot="error">
                                        <icon name="pic"></icon>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="created_at" width="160"></el-table-column>
                        <el-table-column label="最后登录时间" width="160">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.user.last_login_time}">
                                    {{ item.row.user.last_login_time || '无' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="认证" width="50" align="center">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        class="is-round"
                                        :type="item.row.cert_status === 0 ? 'info' : 'success'"
                                        :effect="item.row.cert_status === 0 ? 'light' : 'dark'"
                                        :disable-transitions="true">
                                    {{ item.row.cert_status === 0 ? '否' : '是' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="名企">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        class="is-round"
                                        :type="item.row.famous === 0 ? 'info' : 'success'"
                                        :effect="item.row.famous === 0 ? 'light' : 'dark'"
                                        :disable-transitions="true">
                                    {{ item.row.famous === 0 ? '否' : '是' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="招聘" width="60" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-button size="mini--small"
                                           class="font-s14 text-bold"
                                           round
                                           :type="item.row.count.job === 0 ? 'info' : 'primary'"
                                           :disabled="item.row.count.job === 0">{{ item.row.count.job }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column width="100" align="center" fixed="right">
                            <template slot="header">
                                会员
                                <el-popover placement="top" trigger="hover" content="红点：表示会员已到期">
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <el-badge :is-dot="item.row.user.vip.level > 0 && !item.row.user.is_vip">
                                    <el-tag size="small"
                                            class="is-round"
                                            :type="item.row.user.vip.level === 0 ? 'info' : `v${item.row.user.vip.level}`">
                                        {{ item.row.vip.name }}
                                    </el-tag>
                                </el-badge>
                            </template>
                        </el-table-column>
                        <el-table-column label="合同" width="60" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-button size="mini--small"
                                           class="font-s14 text-bold"
                                           round
                                           :type="item.row.count.contract === 0 ? 'info' : 'success'"
                                           :disabled="item.row.count.contract === 0">
                                    {{ item.row.count.contract }}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="155" fixed="right">
                            <template slot="header">
                                操作
                                <el-popover placement="left" trigger="hover">
                                    <div>
                                        <div><el-tag size="mini"><icon name="edit"></icon></el-tag> 编辑基本资料</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="user"></icon></el-tag> 查看用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="post"></icon></el-tag> 查看岗位</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="contract-sign"></icon></el-tag> 查看合同</div>
                                    </div>
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <div class="r-flex">
                                    <div class="r-flex__item">
                                        <el-button-group class="r-button-group">
                                            <el-button size="medium"
                                                       @click="dialogCompanyBasicShow(item.row.id, item.$index)">
                                                <icon name="edit"></icon>
                                            </el-button>
                                            <el-button size="medium"
                                                       @click="dialogCompanyUserShow(item.row.uid)">
                                                <icon name="user"></icon>
                                            </el-button>
                                        </el-button-group>
                                    </div>
                                    <div>
                                        <el-button-group class="r-button-group">
                                            <el-button size="medium"
                                                       @click="dialogCompanyBasicShow(item.row.id, item.$index)">
                                                <icon name="post"></icon>
                                            </el-button>
                                            <el-button size="medium"
                                                       @click="dialogCompanyUserShow(item.row.uid)">
                                                <icon name="contract-sign"></icon>
                                            </el-button>
                                        </el-button-group>
                                    </div>
                                </div>

<!--                                    <el-button size="medium">-->
<!--                                        <icon name="post"></icon>-->
<!--                                    </el-button>-->
<!--                                    <el-button size="medium">-->
<!--                                        <icon name="contract-sign"></icon>-->
<!--                                    </el-button>-->
<!--                                    <el-tooltip class="item" effect="dark" content="查看详情" placement="top">-->
<!--                                        <el-button size="medium">-->
<!--                                            <icon name="view"></icon>-->
<!--                                        </el-button>-->
<!--                                    </el-tooltip>-->
<!--                                    <el-tooltip class="item" effect="dark" content="查看注册用户" placement="top">-->
<!--                                        <el-button size="medium"-->
<!--                                                   @click="dialogCompanyUserShow(item.row)">-->
<!--                                            <icon name="user"></icon>-->
<!--                                        </el-button>-->
<!--                                    </el-tooltip>-->
<!--                                    <el-tooltip class="item" effect="dark" content="职位" placement="top">-->
<!--                                        <el-button size="medium">-->
<!--                                            <icon name="post"></icon>-->
<!--                                        </el-button>-->
<!--                                    </el-tooltip>-->
<!--                                    <el-tooltip class="item" effect="dark" content="签合同" placement="top">-->
<!--                                        <el-button size="medium">-->
<!--                                            <icon name="contract-sign"></icon>-->
<!--                                        </el-button>-->
<!--                                    </el-tooltip>-->

                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="pagination.perPage"
                                       :current-page.sync="pagination.currentPage"
                                       @size-change="handlePageQuery"
                                       @current-change="handlePageQuery"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import AuthBoxMixin from '@/mixins/cms/auth'
import baseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import OptionsMixin from '@/mixins/options'
import CompanyMixin from '@/mixins/company'

const module = namespace('cms/companyBasic')

import CompanyUserShow from '@/views/cms/company/company-user/Show.vue'
import CompanyBasicShow from '@/views/cms/company/company-basic/Show.vue'

@Component({
  components: {
    CompanyUserShow,
    CompanyBasicShow
  }
})
export default class Index extends mixins(
  AuthBoxMixin,
  baseMixin,
  FunctionMixin,
  PickerDateMixin,
  OptionsMixin,
  CompanyMixin) {
  // Vuex
  @module.State companyBasics!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false
  }

  /*----- 钩子 -----*/
  public created() {
    if (!this.companyBasics.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {object} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.table.loading = true
    return this.query({params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.operate.searchLoading = true
    const params = {
      ...this.search,
      per_page: this.pagination.perPage,
      page: 1
    }
    this.getQuery(params).then(() => {
      this.operate.searchLoading = false
    }).catch(() => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.search = {}
    this.initPagination()
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理查询
   *
   * @return {Promise<any>}
   */
  private handleQuery(): Promise<any> {
    this.table.loading = true
    const params = {
      ...this.search,
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }
    return this.getQuery(params).then((res) => {
      this.table.loading = false
      if (res.status === 200) {
        this.pagination.currentPage = res.data.current_page
      }
    }).catch(() => {
      this.table.loading = false
    })
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/image';

//.user-avatar {
//    width: 32px;
//    height: 32px;
//    background-color: #c0c4cc;
//    border-radius: 20px;
//    box-shadow: 0 0 5px rgba(#000, .1);
//    ::v-deep &__slot {
//        color: #fff;
//        font-size: 14px;
//        line-height: 32px;
//    }
//}
</style>